// 1. 引入需要的hook
// useState的作用: 就是在函数组件中定义状态
// 注意: useState已经把性能优化考虑进去了.如果修改的数据和之前一样,组件不会重复的渲染
import React, { useState } from 'react'

export default function App() {
  console.log('app里面的代码执行了')
  // useState(数据的初始值)
  // useState第一次调用之后,会自动帮我们缓存数据,所以即便是App跟新,count拿到的也一定是最新的数据
  const [count, setCount] = useState(0)
  // 如果一个组件中有多条状态数据,则多次调用useState即可
  const [msg, setMsg] = useState('hello')
  // console.log(result)
  return (
    <div>
      <p>{count}</p>
      <p>{msg}</p>
      <button
        onClick={() => {
          // setCount(目标值)
          setCount(count + 1)
        }}
      >
        +
      </button>
      <button
        onClick={() => {
          // setCount(目标值)
          setMsg('123')
        }}
      >
        修改msg
      </button>
    </div>
  )
}
